<template>
<div class="login">
   <div class="photos">
     <img src="../../assets/img/photo1.png" alt="">
   </div>
    <!-- <p>欢迎加入吃了吗</p> -->
    
    <van-form @submit="onSubmit">
     
    <van-field
        v-model="username"
        name="name"
        label="账号"
        placeholder="用户名"
        :rules="[{ pattern:name, message: '6到16位(字母,数字,下划线)' }]"
    />
    <van-field
        v-model="password"
        type="text"
        name="word"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern:word, message: '以大写或小写字母开头的六位数' }]"
    />
    <van-field
        v-model="pass"
        type="text"
        name="words"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ validator, message: '两次密码不一样' }]"
    />
    <van-field
        v-model="phone"
        type="手机号"
        name="phones"
        label="手机号"
        placeholder="手机号"
        :rules="[{ pattern:phones, message: '请填写12位的手机号' }]"
    />
      <van-radio-group v-model="radio" direction="horizontal">
        <span>性别：</span>
      <van-radio name="男">男</van-radio>
      <van-radio name="女">女</van-radio>
    </van-radio-group>
     <van-field
        v-model="text"
        name="texts"
        label="备注:"
        placeholder=""
        :rules="[{required: true }]"
    />
    
    <div style="margin: 30px 45px;width:290px;height:30px;">
      
        <van-button round block type="info" native-type="submit" @click="show = true"> 
        注 册
        </van-button>
    </div>
    </van-form>
    <div class="signIn-tip" v-show="state">
      注册成功，正在跳转登录页面...
  </div>
  <!-- <van-dialog v-model="show" title="注册成功，正在跳转登录页面..." >
</van-dialog> -->

</div>

</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
// import { Dialog } from 'vant';

import "../../assets/iconfont/iconfont.css"
import axios from "axios"




export default {
  data() {
      
    return {
      username: '',
      password: '',
      pass:'',
      phone:'',
      radio: '',
      text:'',
      state:false,
      // show: false,
      // 4到16位（字母数字）
      name: /^[a-zA-Z_]\w{4,16}$/,
       // 最少6位，包括1个小写字母，1个数字，1个特殊字符
      word:/^[a-zA-Z_]\w{5,}$/, 
      // 以大写或小写字母开头的五位数
      words:/^[a-zA-Z_]\w{5,}$/,
      // 中文
      //   手机号
      phones:/^1[3456789]\d{9}$/,
    };
  },
  created() {
    // 底部菜单隐藏
    this.$store.state.footerNavShow = false
  },
  methods: {
    
    onSubmit(values) {
     
        this.state = true
        
          setTimeout(()=>{
           this.$router.push({ name: "login" });
         },2000)
      

      if(values.word === values.words){

        this.$api.signIn(
          {
          username: values.name,
          password: values.word,
          phone: values.phones,
          confirmPass: values.words,
          sex: this.radio,
          remarks: this.text,

        }).then(()=>{
            this.username= '',
            this.password= '',
            this.pass='',
            this.phone='',
            this.radio= '',
            this.text=''
        })
        // axios.post("http://10.9.46.208:9090/api/v1/adduser",
        // {
        //   username: values.name,
        //   password: values.word,
        //   phone: values.phones,
        //   confirmPass: values.words,
        //   sex: this.radio,
        //   remarks: this.text,

        // }).then(()=>{
        //     this.username= '',
        //     this.password= '',
        //     this.pass='',
        //     this.phone='',
        //     this.radio= '',
        //     this.text=''
        // })
      }
    },
  validator(val) {
    return this.password === val
    }
  },
  //  components: {
  //   [Dialog.Component.name]: Dialog.Component,
  // },
};
</script>

<style lang="scss" scoped>
.signIn-tip{
  position: fixed;
  top: 79%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  width: 250px;
  text-align: center;
  // background: gold;
  color: #fff;
  z-index: 99999;
  font-weight: 700;
}
.login{
  // width: 375px;
  height: 667px;
  background: url("../../assets/img/zhuce.png")  no-repeat 100% 100%/cover;
  position: relative;
  // background-color: #fab3c3;
  .photos{
    img{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: block;
    justify-content: center;
    display: flex;
    margin: 0 auto;
    // padding-top: 50px;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 120px;
    }
   
  }
  
  
  .van-button--info{
  background-color: #f5aa11;
  border: 1px solid #f5aa11;
  .van-button__text{
    font-size: 16px;
    
  }
}

.van-form{
  padding:15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding-top: 180px;
}
.van-cell{
  margin-top: 8px;
  border-radius: 30px;
  width: 300px;
  // height: 52px;
}
.van-radio-group{
  margin-top: 8px;
  border-radius: 30px;
  width: 300px;
  height: 45px;
  background-color: #fff;display: flex;
  justify-content: space-evenly;
  span{
    color: #646566;
    margin-top: 10px;
    margin-left: -23px;
    display: flex;
    justify-content: flex-start;
  }
  
}
.van-cell__value{
  height: 15px;
}
.van-field__body{
  height: 15px;
}
.van-cell__value{
  border: 1px solid #666;
}
.van-button{
  width: 150px;
  margin-left: 60px;
}
}

</style>
